<template>
  <div class="root">
		<v-table
				is-horizontal-resize
				is-vertical-resize
				style="width:100%"
				:columns="columns"
				column-width-drag
				:table-data="tableData"
				:is-loading="isLoading"
				:column-cell-class-name="columnCellClass"
				row-hover-color="#eee"
				row-click-color="#edf7ff"
				@on-custom-comp="customCompFunc"
				:cell-edit-done="cellEditDone"
		></v-table>
		<!-- <div class="mt20 mb20 bold"></div> -->
		<div class="table-pagination">
			<v-pagination @page-change="pageChange" @page-size-change="pageSizeChange" :total="total" :page-size="pageSize"
				:pageSizeOption="pageSizeOption">
			</v-pagination>
		</div>
  </div>
</template>

<script>
export default {
  name: 'easytable',
  props: {
    tableData: Array,
    columns: Array,
    total: Number
  },
  data () {
    return {
      isLoading: false,
      pageSize: 10,
      pageIndex: 1,
      pageSizeOption: [1, 10, 15, 20, 30, 50]
    }
  },
  methods: {
    /* 单元格样式 */
    columnCellClass (rowIndex, columnName, rowData) {
      let isChange = rowData.isChange
      if (isChange && isChange.indexOf(columnName) > -1) return 'columnCellChange'
    },
    // 单元格编辑回调
    cellEditDone (newValue, oldValue, rowIndex, rowData, field) {
      if (newValue !== oldValue) {
        console.log(rowData)
        let row = this.tableData[rowIndex]
        if (!row.isChange) row.isChange = []
        if (row.isChange.indexOf(field) === -1)row.isChange.push(field)
        this.tableData[rowIndex][field] = newValue
        // 接下来处理你的业务逻辑，数据持久化等...
      }
    },
    pageChange (pageIndex) {
			this.pageIndex = pageIndex
      this.$emit('pageChange')
    },
    pageSizeChange (pageSize) {
			this.pageIndex = 1
      this.pageSize = pageSize
      this.$emit('pageSizeChange')
    },
    customCompFunc (param) {
      /* 自定义列组件与父组件通讯 */
      if (param.type === 'delete') this.$emit('delete', param)
      else if (param.type === 'modify') this.$emit('modify', param)
      else this.$emit('update', param)
    }
  }
}
</script>

<style scoped>
	.table-pagination{
		margin-top: .3rem;
		text-align: right;
	}
	.root >>> .v-table-title-cell{
		font-size: 1.5rem;
		font-weight: bold;
		background-color: #eee
	};

</style>
